<!--
 * @Author: DT1604\ZPL zhoupeili@dpc.com.cn
 * @Date: 2022-05-28 09:48:37
 * @LastEditors: DT1604\ZPL zhoupeili@dpc.com.cn
 * @LastEditTime: 2022-06-22 18:15:48
 * @FilePath: \energy-om-platform\src\views\cabint\log.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="logs">
    <el-form :model="form" :rules="rules" ref="form" label-width="90px">
      <el-form-item label="日志日期" prop="date" required>
        <el-date-picker
          style="width: 100%"
          type="date"
          placeholder="请选择日志日期"
          v-model="form.date"
          @change="dateChange"
        ></el-date-picker>
      </el-form-item>

      <!-- <el-form-item label="日志FTP用户名" prop="username">
        <el-input
          v-model="form.username"
          placeholder="请输入日志FTP用户名"
        ></el-input>
      </el-form-item>
      <el-form-item label="日志FTP密码" prop="password">
        <el-input
          :key="passwordType"
          ref="password"
          v-model="form.password"
          :type="passwordType"
          placeholder="请输入日志FTP密码"
          name="password"
          tabindex="2"
          auto-complete="on"
        />
        <span class="show-pwd" @click="showPwd">
          <svg-icon
            :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
          />
        </span>
      </el-form-item> -->

      <el-form-item label="日志级别" prop="level">
        <el-select
          v-model="form.level"
          placeholder="请选择日志级别"
          style="width: 100%"
          @change="levelChange"
        >
          <el-option
            v-for="(item, index) in loglevel"
            :key="index"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="日志文件名称" prop="filename">
        <el-input
          v-model="form.filename"
          placeholder="请输入日志文件名称"
        ></el-input>
      </el-form-item> -->
      <div class="tips">
        <el-link type="danger" :underline="false"
          >注：若填写此项，则会根据所填内容创建目录；否则默认根目录
          <br />可以用'/' 不能用'\',如：www/datas
        </el-link>
      </div>
      <el-form-item label="FTP目录">
        <el-input
          v-model="form.url"
          placeholder="请输入FTP目录"
          @keyup.native="keyUp"
          @keydown.native="keydown"
        ></el-input>
      </el-form-item>

      <el-form-item label="接收邮箱" prop="receiveEmail">
        <el-input
          v-model="form.receiveEmail"
          placeholder="请输入接收邮箱"
        ></el-input>
      </el-form-item>

      <el-form-item class="dialog-footer">
        <el-button @click="resetForm('form')">取消</el-button>
        <el-button
          type="primary"
          @click="submitForm('form')"
          :loading="btnLoading"
          >确定</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { logtract } from "@/api/cabint";
import { mapGetters } from "vuex";
var moment = require("moment");
export default {
  props: {
    equipList: {
      default: [],
      type: Array,
    },
    updateDialogVisible: {
      default: true,
      type: Boolean,
    },
  },
  data() {
    return {
      form: {
        date: "",
        filename: "",
        level: "",
        url: "",
        receiveEmail: "",
      },
      rules: {
        date: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        filename: [
          { required: true, message: "请输入日志文件名称", trigger: "blur" },
        ],
        level: [
          { required: true, message: "请选择日志级别", trigger: "change" },
        ],
        receiveEmail: [
          { required: true, message: "请输入接收邮箱", trigger: "blur" },
        ],
      },
      passwordType: "password",
      btnLoading: false, //按钮loading
      fileType:'',//查询级别fileType
    };
  },
  computed: {
    ...mapGetters(["loglevel"]),
  },
  created() {
    this.form.filename = this.equipList[0].code;
  },
  watch: {
    updateDialogVisible: {
      handler(newVal, oldVal) {
        if (!newVal) {
          this.resetData();
        }
      },
      immediate: true,
    },
  },
  methods: {
    //限制输入特殊字符
    keyUp(e) {
      e.target.value = e.target.value.replace(
        /[`~!@#$%^&*()_\-+=<>?:"{}|,.\;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g,
        ""
      );
      this.form.url = e.target.value;
    },
    // 只能输入汉字、英文、数字
    keydown(e) {
      e.target.value = e.target.value.replace(
        /[^\a-\z\A-\Z0-9\u4E00-\u9FA5/]/g,
        ""
      );
      this.form.url = e.target.value;
    },
    resetData() {
      this.resetForm("form");
      this.btnLoading = false;
    },
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.isDoLog();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.emitClose();
    },
    // 通知关闭弹框
    emitClose() {
      this.$emit("closeDialog");
    },

    async doLog() {
      this.btnLoading = true;
      let codes = this.equipList.map((item) => {
        return item.code;
      });
      const { filename, level, url } = {
        ...this.form,
      };
      let date = moment(this.form.date).format("YYYYMMDD");

      let logExtractParam = {
        filename,
        level,
        url,
        date,
      };
      let params = Object.assign(
        { logExtractParam: logExtractParam },
        {
          equipmentCode: codes[0],
          receiveEmail: this.form.receiveEmail,
        }
      );
      await logtract("/insert", params)
        .then((res) => {
          if (res.code == 200) {
            this.emitClose();
            this.$message({
              message: res.message,
              type: "success",
            });
            // this.$emit("resetData");
          }
        })
        .finally((complete) => {
          this.btnLoading = false;
        });
    },
    isDoLog() {
      this.$confirm("是否确认要新增日志提取?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.doLog();
      });
    },
    levelChange(e) {
      this.fileType = this.loglevel.find(item=>item.code == e).fileType;
      this.detalFile();
    },
    dateChange() {
      this.detalFile();
    },
    detalFile() {
      let date = moment(this.form.date).format("YYYYMMDD");
      this.form.filename = this.form.date
        ? this.equipList[0].code + "_" + date
        : this.equipList[0].code;
      this.form.filename += this.form.level ? (`_${this.form.level}${this.fileType}` ) : "";
    },
  },
};
</script>

<style scoped lang="scss">
$dark_gray: #889aa4;
.dialog-footer {
  text-align: right;
}
.show-pwd {
  position: absolute;
  right: 15px;
  top: 0;
  font-size: 16px;
  color: $dark_gray;
  cursor: pointer;
  user-select: none;
}
.tips {
  margin: 30px 17% 10px;
}
</style>
